<template>
    <div class="body">
        <el-card v-if="dataList.length == 0" style="width: 100%;background-color: #eaeaea;padding: 50px 0;">
            内容为空！
        </el-card>

        <el-space v-else wrap :size="size" style="width: 100%;" >
            <el-card v-for="(data, index) in dataList" shadow="hover" class="card" @click="Detail(data)">

                <el-image style="width: 185px;height: 250px;border: 1px lightgray solid;" :src="data.cover" fit="cover">
                    <template #error>
                        <div style="font-size: 30px;text-align: center;line-height: 250px;">
                            <el-icon>
                                <Picture />
                            </el-icon>
                        </div>
                    </template>
                </el-image>
                <el-col>
                    <el-text truncated style="font-size: 16px;color: black;">{{ data.name }}</el-text>
                    <br>
                    <el-text truncated type="info" style="font-size: 13px;width: 90%;">{{
                        data.types?.join("&nbsp;&nbsp;") || ' - '
                        }}</el-text>
                </el-col>

            </el-card>
        </el-space>

        <div v-show="hasFooter" style="text-align: center;height: 100px;">
            <el-text type="info" style="line-height: 150px;">到底了~</el-text>
        </div>
    </div>
</template>

<script setup lang="ts">

defineProps({
    dataList: {
        type: Array<any>,
        required: true,
    },
    Detail: {
        type: Function,
        required: true,
    },
    hasFooter: {
        type: Boolean,
        default: true,
    },
    size: {
        type: Number,
        default: 24,
    }
})

</script>

<style scoped>
.card {
    width: 230px;
    border: none;
}

.body {
    min-height: 100%;
    padding-top: 20px;
    text-align: center;
}
</style>